<script src="__CDN__/assets/libs/jquery/dist/jquery.min.js"></script>
<script src="__CDN__/assets/question/js/vue.js"></script>
<link rel="stylesheet" type="text/css" href="__CDN__/assets/question/css/common.css">
</link>
<script src="__CDN__/assets/question/js/element-ui/index.js"></script>
<link rel="stylesheet" type="text/css" href="__CDN__/assets/question/js/element-ui/index.css">
</link>

<div id="app">

    <form id="edit-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">{:__('Mock_id')}:</label>
            <div class="col-xs-12 col-sm-8">
                <input id="c-mock_id" data-rule="required" data-order-by="weigh desc" data-source="mock/index"
                    class="form-control selectpage" name="row[mock_id]" type="text" value="{$row.mock_id|htmlentities}">
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">{:__('Examination_point_ids')}:</label>
            <div class="col-xs-12 col-sm-8">
                <input id="c-examination_point_ids" data-rule="required" data-order-by="weigh desc" data-source="examinationpoint/index"
                    class="form-control selectpage" data-multiple="true" name="row[examination_point_ids]" type="text" value="{$row.examination_point_ids|htmlentities}">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">{:__('Title')}:</label>
            <div class="col-xs-12 col-sm-8">
                <div id="c-title1" v-show="showTitleEditor">
                    <textarea id="c-title" class="form-control editor"
                        name="row[title]">{$row.title|htmlentities}</textarea>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">{:__('Kind')}:</label>
            <div class="col-xs-12 col-sm-8">
                <div class="radio">
                    {foreach name="kindList" item="vo"}
                    <label for="row[kind]-{$key|htmlentities}">
                        <input @change="changeKind" id="row[kind]-{$key|htmlentities}" name="row[kind]" type="radio"
                            value="{$key|htmlentities}" {in name="key" value="$row.kind" }checked{/in} />
                        {$vo|htmlentities}
                    </label>
                    {/foreach}
                </div>
            </div>
        </div>


        <!--原题型-->
        <div v-show="kind === 'JUDGE' || kind === 'SINGLE' || kind === 'MULTI'">
            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-2">{:__('Options_json')}:</label>
                <div class="col-xs-12 col-sm-8">
                    <dl class="fieldlist" data-name="row[options_json]">
                        <dd>
                            <ins>选项</ins>
                            <ins>内容</ins>
                        </dd>
                        <dd><a href="javascript:;" class="btn btn-sm btn-success btn-append"><i class="fa fa-plus"></i>
                                {:__('Append')}</a></dd>
                        <textarea name="row[options_json]" class="form-control hide" cols="30"
                            rows="5">{$row.options_json|htmlentities}</textarea>
                    </dl>

                    <textarea id="c-options_img" name="row[options_img]" class="form-control hide" cols="30"
                        rows="5">{$row.options_img|htmlentities}</textarea>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-2">{:__('Answer')}:</label>
                <div class="col-xs-12 col-sm-8">
                    <!--{ notin name="$row.kind" value="FILL,SHORT,MATERIAL" }-->
                    <input id="c-answer" class="form-control" name="row[answer]" type="text"
                        value="{$row.answer|htmlentities}" readonly="readonly">
                    <!--{ /notin }-->
                </div>
            </div>
        </div>

        <!--填空题-->
        <div v-show="kind === 'FILL'">
            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-2">填空位:</label>
                <div class="col-xs-12 col-sm-8">
                    <button type="button" class="btn btn-success" @click="addFillOptions()"><i class="fa fa-plus"></i>
                        新增填空位</button>

                    <div v-for="(option, index) in fillOptions" :key="index">
                        <p style="margin-left: 10px; margin-top: 10px;">填空位（{{(index + 1)}}）答案（任意答案匹配即算正确）</p>

                        <div class="fill-option" v-for="(answer, key) in option.answers" :key="key">
                            <div>
                                <input type="text" class="form-control" :name="'row[answer]['+index+'][answers][]'"
                                    v-model="fillOptions[index].answers[key]" placeholder="请输入答案" />
                            </div>
                            <div class="m-l-10">
                                <button type="button" class="btn btn-danger" @click="deleteFillAnswer(index, key)"><i
                                        class="fa fa-trash"></i> </button>
                            </div>
                        </div>
                        <button type="button" class="btn btn-info" @click="addFillAnswer(index)"><i
                                class="fa fa-plus"></i> 新增答案项</button>
                    </div>

                </div>
            </div>
        </div>

        <!--简答题-->
        <div v-show="kind === 'SHORT'">
            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-2">标准答案:</label>
                <div class="col-xs-12 col-sm-8">
                    <textarea id="c-short_answer" class="form-control" name="row[short_answer]"
                        rows="5">{$row.answer|htmlentities}</textarea>
                </div>
            </div>

            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-2">关键词:</label>
                <div class="col-xs-12 col-sm-8">
                    <button type="button" class="btn btn-success" @click="addShortOptions()"><i class="fa fa-plus"></i>
                        新增关键词</button>
                    <!-- <p style="margin-left: 10px; margin-top: 10px;" class="text-info">任意关键词匹配得分数</p> -->

                    <div v-for="(option, index) in shortOptions" :key="index" class="row m-t-5">
                        <div class="col-sm-7">
                            <input type="text" class="form-control" :name="'row[answer_config]['+index+'][answer]'"
                                v-model="option.answer" placeholder="请输入关键词" />
                        </div>
                        <div class="col-sm-3">
                            <button type="button" class="btn btn-danger" @click="deleteShortAnswer(index)"><i
                                    class="fa fa-trash"></i> </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>


       

        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">{:__('Remark')}:</label>
            <div class="col-xs-12 col-sm-8">
                <input id="c-remark" class="form-control" name="row[remark]" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">{:__('Difficulty')}:</label>
            <div class="col-xs-12 col-sm-8">

                <select id="c-difficulty" data-rule="required" class="form-control selectpicker" name="row[difficulty]">
                    {foreach name="difficultyList" item="vo"}
                    <option value="{$key|htmlentities}" {in name="key" value="$row.difficulty" }selected{/in}>
                        {$vo|htmlentities}</option>
                    {/foreach}
                </select>

            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">{:__('Weigh')}:</label>
            <div class="col-xs-12 col-sm-8">
                <input id="c-weigh" class="form-control" name="row[weigh]" type="number" value="{$row.weigh}">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">{:__('Explain')}:</label>
            <div class="col-xs-12 col-sm-8">
                <textarea id="c-explain" class="form-control editor"
                    name="row[explain]">{$row.explain|htmlentities}</textarea>
            </div>
        </div>


        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">{:__('Status')}:</label>
            <div class="col-xs-12 col-sm-8">
                <div class="radio">
                    {foreach name="statusList" item="vo"}
                    <label for="row[status]-{$key|htmlentities}"><input id="row[status]-{$key|htmlentities}"
                            name="row[status]" type="radio" value="{$key|htmlentities}" {in name="key"
                            value="$row.status" }checked{/in} /> {$vo|htmlentities}</label>
                    {/foreach}
                </div>
            </div>
        </div>
        <div class="form-group layer-footer">
            <label class="control-label col-xs-12 col-sm-2"></label>
            <div class="col-xs-12 col-sm-8">
                <input type="button" id="valid" @click="valid" class="hide">

                <button type="submit" class="btn btn-success btn-embossed disabled">{:__('OK')}</button>
                <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
            </div>
        </div>
    </form>
</div>

{include file="../application/admin/view/question/extend.html" /}